import React, {Component} from 'react';
import {Button} from 'antd';
import { WeaLocaleProvider } from 'ecCom';
import classnames from 'classnames';
import moment from 'moment';
import Content from './Content';

const { getLabel } = WeaLocaleProvider;

export default class Item extends Component{
    sign = () => {
        const {data} = this.props;
        this.props.sign && this.props.sign(data);
    }

    render(){
        const {data, activeIndex, currIndex, isLast} = this.props;
        let label = (data.type === 'on' ? `${getLabel('125809','上班时间')} ` : `${getLabel('125810','下班时间')} `);
        label += (data.pre === '1' ? getLabel('500501','昨日') : (data.across === '1' ? getLabel('388785','次日') : ''));
        label += data.time;
        const infoClassName = classnames({
            info: true,
            ['info-last']: isLast
        })

        const className = classnames({
            dot: true,
            ['dot-active']: data.active === '1',
            ['dot-default']: data.active === '0',
            'icon-coms-shang': data.type === 'on',
            'icon-coms-xia': data.type != 'on',
        });
        const btnClassName = classnames({
            signBtn: true,
            ['btn-abnormal']: data.isYellow === '1'
        })
        let dot = (data.type === 'on' ? '上' : '下');
        let showBtn = false;
        const {canSignTime, date, type, signAcross} = data;
        if(canSignTime == null || canSignTime == '')//自由班制或未设置打卡区间
            showBtn = true;
        else{
            let m = moment(`${date} ${canSignTime}`, 'YYYY-MM-DD HH:mm:ss');
            if(type === 'on'){
                m.add(-1 * signAcross, 'd');
                showBtn = !moment().isBefore(m);
            }else{
                m.add(signAcross, 'd');
                showBtn = moment().isBefore(m);
            }
        }

        return (
            <div className={infoClassName}>
                <div className='schedual'>
                    <div className={className}></div>
                    <div className='time text-elli' title={label}>{label}</div>
                </div>
                {
                    data.needSign === '1' &&
                    <div className='signBtnPanel'>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8z8n0i`} type='primary' className={btnClassName} name='signBtn' onClick={this.sign}>{getLabel('500502','打卡')}</Button>
                    </div>
                }
                <Content ecId={`${this && this.props && this.props.ecId || ''}_Content@tdaswb`} {...this.props}/>
            </div>
        )
    }
}